<template>
  <div>
    <div class="header">
      <div class="header-son">
        <p @click="fun()">&lt;&nbsp;&nbsp;&nbsp; ×</p>
        <span>我的客服</span>
      </div>

      <div class="lunbotu">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item>
            <img src="img/wangimg/imgs/kefu-1.jpg" alt="" />
          </van-swipe-item>
          <van-swipe-item>
            <img src="img/wangimg/imgs/kefu-2.gif" alt="" />
          </van-swipe-item>
        </van-swipe>
      </div>

      <div class="tesefuwu">
        <div class="tesefuwu-son">
          <b>特色服务</b>
        </div>
        <ul class="tesefuwu-son2">
          <li>
            <img src="img/wangimg/imgs/tesefuwu-1.gif" alt="" />
            <span>我的投诉</span>
          </li>
          <li>
            <img src="img/wangimg/imgs/tesefuwu-2.gif" alt="" />
            <span>话费充值</span>
          </li>
          <li>
            <img src="img/wangimg/imgs/tesefuwu-3.gif" alt="" />
            <span>我的套餐</span>
          </li>
          <li>
            <img src="img/wangimg/imgs/tesefuwu-4.gif" alt="" />
            <span>我的订单</span>
          </li>
          <li>
            <img src="img/wangimg/imgs/tesefuwu-5.gif" alt="" />
            <span>在线资费</span>
          </li>
          <li>
            <img src="img/wangimg/imgs/tesefuwu-6.gif" alt="" />
            <span>套餐余量</span>
          </li>
          <li>
            <img src="img/wangimg/imgs/tesefuwu-7.gif" alt="" />
            <span>流量查询</span>
          </li>
          <li>
            <img src="img/wangimg/imgs/tesefuwu-8.gif" alt="" />
            <span>积分商城</span>
          </li>
        </ul>
      </div>

      <!-- 猜你想问 -->
      <div class="cnxw">
        <p><b>猜你所想</b></p>
        <div class="cnxw-son2">
          <van-tabs v-model="active">
            <van-tab title="热点">
              内容 1
            </van-tab>
            <van-tab title="账单">
              内容 2
            </van-tab>
            <van-tab title="套餐">
              内容 3
            </van-tab>
            <van-tab title="流量">
              内容 4
            </van-tab>
            <van-tab title="已定业务">
              内容 5
            </van-tab>
          </van-tabs>
        </div>
      </div>
      <!-- 空 -->
      <div class="kong"></div>

      <!-- 咨询方式 -->
      <div class="zxfs">
        <p><span class="iconfont icon-dianhuakefu"></span>电话客服</p>
        <p class="p2"><span class="iconfont icon-kefu"></span>在线客服</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
      data() {
      return {
        active: 2,
      };
    },
    fun() {
      this.$router.go(-1);
    },
  },
};
</script>

<style scoped>
*{
  margin: 0;
  padding: 0;
  text-decoration-line: none;
  list-style-type: none;
}
.header {
  width: 100%;
  height: 100%;
  background-color: #f6f6f6;
}
.header-son {
  width: 100%;
  height: 0.48rem;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 0.2rem;
  background-color: white;
}
.header-son p {
  position: absolute;
  left: 0.1rem;
  font-size: 0.26rem;
}
.header-son span {
  font-size: 0.22rem;
}

.lunbotu {
  width: 90%;
  height: 1.04rem;
  margin: auto;
  border-radius: 15px;
}
.my-swipe {
  width: 100%;
  height: 100%;
  border-radius: 15px;
}
.my-swipe .van-swipe-item img {
  width: 100%;
  height: 100%;
}

.tesefuwu {
  width: 90%;
  height: 2.04rem;
  margin: 0.2rem auto;
  border-radius: 15px;
  background-color: #fff;
}
.tesefuwu-son {
  width: 100%;
  height: 0.46rem;
}
.tesefuwu-son b {
  position: absolute;
  left: 0.4rem;
  font-size: 0.16rem;
  line-height: 0.46rem;
}
.tesefuwu-son2 {
  width: 100%;
  height: 1.4rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: center;
}
.tesefuwu-son2 li {
  width: 0.84rem;
  height: 0.55rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.tesefuwu-son2 li img {
  width: 0.26rem;
  height: 0.26rem;
  margin-bottom: 0.05rem;
}
.tesefuwu-son2 li span {
  font-size: 0.12rem;
}

.cnxw {
  width: 90%;
  height: 2.9rem;
  margin: 0.2rem auto;
  border-radius: 15px;
  background-color: white;
}
.cnxw p {
  width: 100%;
  height: 0.46rem;
  font-size: 0.16rem;
  line-height: 0.46rem;
}
.cnxw p b {
  position: absolute;
  left: 0.4rem;
}
.cnxw-son2 {
  width: 100%;
  height: 2.4rem;
}



.zxfs {
  width: 100%;
  height: 0.6rem;
  margin: auto;
  position: fixed;
  bottom: 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: white;
}
.zxfs p{
  width: 1.56rem;height: 0.4rem;
  border: 1px solid gray;
  border-radius: 30px;
  text-align: center;
  line-height: 0.4rem;
  font-size: 0.14rem;
  position: relative;
}
.zxfs .p2{
  background-color: #387ef6;
  color: #fff;
  border: none;
}
.zxfs .p2 span{
  color: #fff;
}
.zxfs p span{
  font-size: 0.2rem;color: #000;
  position: absolute;
  left: 0.2rem;
}

.kong {
  width: 100%;
  height: 0.5rem;
}
</style>
